<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="publicPart ::commonHead">
    <head th:if="${session.userInfo == null}">
        <meta charset="UTF-8">
        <title>Title</title>
        <!--    css,img资源-->
        <link href="../static/bootstrap-4.6.1-dist/css/bootstrap.min.css" th:href="@{/bootstrap-4.6.1-dist/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
        <script src="../static/jQuery/jquery-3.6.0.min.js" th:src="@{/jQuery/jquery-3.6.0.min.js}"></script>
        <script src="../static/jQuery/jquery.cookie.js" th:src="@{/jQuery/jquery.cookie.js}"></script>
        <script src="../static/bootstrap-4.6.1-dist/js/bootstrap.bundle.js" th:src="@{/bootstrap-4.6.1-dist/js/bootstrap.bundle.js}"></script>
        <script type="text/javascript" src="../static/js/publicPart.js" th:src="@{/js/publicPart.js}"></script>
        <link href="../static/css/publicPart.css" rel="stylesheet" th:href="@{/css/publicPart.css}">

        <link href="../static/css/login.css" rel="stylesheet" th:href="@{/css/login.css}">
    </head>
    <!--editor.md需要引入的js文件和js配置-->
    <link rel="stylesheet" href="../static/lib/css/editormd.min.css" th:href="@{/lib/css/editormd.min.css}">
    <!--    公共部件样式-->
    <!--    <link rel="stylesheet" href="./css/publicPart.css">-->
    <style>
        .test{
            color: black;
            height:5px;
        }
        #articleTitle{
            width: 68%;
            margin-top:15px;
        }
        /*#articleCategory{
            margin-top:15px;
            width:10%;
        }*/
        #btnList {
            position:relative;
            /*float:right;*/
            left:3%;
            margin-top:15px;
            padding-right:70px;
        }
        .d4{
            margin-left: 0px;
            float: left;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
        }
        /**html*/

    </style>
</head>
<body style="background-image: url(/demo/img/z.png);">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" aria-label="Ninth navbar example">
    <div class="container-fluid">
        <div class="d4"></div>
        <a class="navbar-brand" href="/demo/main">退出</a>
        <!--                导航栏折叠-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" >
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav w-100">
                <li class="nav-item d-flex m-auto " style="width: 80%">
                    <a class="nav-link" aria-disabled="true">文章标题：</a>
                    <input class="form-control  mb-auto mt-auto ml-2 mr-2 inputSearch" style="width: 80%" id="articleTitle"type="text" name="content"placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success " data-toggle="modal" data-target="" id="publishArticle" type="button">发布文章</button>
                </li>
            </ul>
            <ul th:replace="publicPart::nav-user-image"></ul>
        </div>
    </div>
</nav>
<div style="height: 80px;"></div>
<div style="height:550px">
    <div id="my-editormd">
        <textarea id="articleContent" name="articleContent" style="display:none;"></textarea>
    </div>
</div>
<!--<div class="form-group m-auto" style="width: 80%" >-->
<!--    <label for="tag">标签:</label>-->
<!--    <input type="text" class=" form-control " name="tags" id="tag" placeholder="标签用,分隔">-->
<!--</div>-->
<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitle">发布文章</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <form id="submitForm">
                    <input type="text" class="form-control" name="tags" id="tags" placeholder="标签用,分隔">
                </form>

            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <a type="button" href="#" id="btnUpdateTags"class="btn btn-outline-info" >确认</a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>
</body>


<!--    js资源-->
<script src="../static/lib/editormd.js" th:src="@{/lib/editormd.js}"></script>
<!--    js资源-->
<script type="text/javascript">
    let createDate = null;
    let star = 0;
    let blogId = $.cookie("upDataBlogId")
    $(function() {
        $("#publishArticle").click(function () {
            if (writeArticle.doCheck()) {
                $(this).attr("data-target","#myModal")
            }
        })
        if (blogId) {
            $("#modelTitle").text("保存文章")
            $("#publishArticle").text("保存文章")
            $.post("/demo/search", {"blogId":blogId,"userId":-1},function (rst) {
                let blogInfo=rst[0]
                $("#articleTitle").val(blogInfo.blogTitle)
                $("#tags").val(blogInfo.blogTags)
                createDate = blogInfo.createDate
                star = blogInfo.star;
                loadEditor(blogInfo)
                // $("#publishArticle").click(updataBlog)
                $("#btnUpdateTags").click(updataBlog)
            })
        } else {
            loadEditor()
            // $("#publishArticle").click(publishAricle)
            $("#btnUpdateTags").click(publishAricle)
        }
    });

    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "H+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    let updataBlog = function() {
        // if (writeArticle.doCheck()) {
            let title = $("#articleTitle").val();
            let content = $("#articleContent").val();
            let data = {'blogTitle': title, 'content': content, 'blogId': blogId, 'tags':$("#tags").val()}
            $.post("/demo/upDate/blog", data, function (rst) {
                if (rst == "success") {
                    alert("保存成功")
                    window.location.href = "/demo/home/" + $.cookie("userId");
                } else alert("保存失败")
            })
        // }
    }
    /* 发送文章*/
    let publishAricle = function () {
        // if (writeArticle.doCheck()) {
            let title = $("#articleTitle").val();
            let content = $("#articleContent").val();
            let currtime = new Date().Format("yyyyMMddHHmmss");
            if (!createDate) createDate = currtime;
            let userId = $.cookie('userId')

            let data = {'blogTitle': title, 'content': content, 'createDate': createDate, 'blogState': 1, 'star': star, 'tags':$("#tags").val()}
            // alert(data)
            $.post("/demo/submit/blog", data, function (rst) {
                if (rst == "success") {
                    alert("发布成功")
                    // window.location.href = "/demo/main";
                    window.location.href = "/demo/home/" + $.cookie("userId");
                } else {
                    alert("发送失败")
                }
            })
        // }
    }

    var writeArticle = {
        doCheck: function() {//校验
            //debugger;
            var title = $("#articleTitle").val();
            var content = $("#articleContent").val();
            if (typeof(title) == undefined || title == null || title == "" ) {
                alert("请填写文章标题!");
                return false;
            }

            if(typeof (content) == undefined || content == null || content == "") {
                alert("请填写文章内容!");
                return false;
            }

            return true;
        }
    }
    function loadEditor(blogInfo) {
        let myEditor  = editormd("my-editormd", {//上面div的id值
            width: "80%",
            height: "100%",
            editorTheme: "3024-day",
            theme: "gray",
            previewTheme: "default",
            path: $.cookie('userId') != null ? "/demo/lib/lib/" : "../static/lib/lib/",// 这里我的html文件和editor.md-master文件位置如下图
            saveHTMLToTextarea : true,//这个配置，方便post提交html源码表单，保存 HTML 到 Textarea它关乎后端是否可以获取到值
            markdown:blogInfo ? blogInfo.content : "",
            imageUpload : true,//开启上传图片吗？
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//图片支持的格式
            imageUploadURL : "/demo/upload",//处理图片上传的url
            onload : function() {
                console.log('onload', this);
            },
            emoji : true,
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,

        });
    }
</script>
</html>